// 购物车信息的状态管理文件 —— vuex

// 导入购物车请求接口
// 1、changeCatrItemCount：修改购物车商品数量
import { changeCatrItemCount } from '@/api/cart_api'

// 导入自己封装的功能函数
import judgeRequest from '@/utils/judge_request' // 判断请求状态
import debounce from '@/utils/debounce' // 防抖函数

// 数据
const state = {
  // 存储购物车的数据，需要存储的数据：
  // 1. skuId：商品规格的 id
  // 2. checked：被选中的状态
  // 3. count：商品数量
  // 4. image：商品图片
  // 5. title：商品标题
  // 6. price：商品价格
  // 7. stock：商品库存
  cartList: []
}
// 计算属性
const getters = {
  // 1、筛选选中的选项
  checkedItems (state) {
    return state.cartList.filter(item => item.checked === true)
  },
  // 2、基于选中的商品，计算商品总价
  totalPrice (state, getters) {
    // 对所有勾选的商品，计算其总价
    return getters.checkedItems.reduce((sum, item) => sum + item.count * item.price, 0)
  },
  // 3、全选按钮更改商品勾选状态
  checkedAll (state) {
    return state.cartList.length === state.checkedItems.length
  }
}

// 同步处理
const mutations = {

  // 1、添加商品
  addToCart (state, payload) {
    // payload 应该包含：skuId、checked、count、image、title、price、stock
    state.cartList.push(payload)
  },
  // 2、清空商品（删除数据）
  clearCart (state) {
    // 数据清空
    state.cartList = []
  },
  // 3、更改商品勾选状态
  changeChecked (checkStatus, id) {
    // 找到对应 id 的商品，修改其勾选状态
    this.cartList.find(item => item.id === id).checked = checkStatus
  },
  // 4、更改商品数量
  changeCount (id, count) {
    // 找到对应 id 的商品，修改其商品数量
    this.cartList.find(item => item.id === id).count = count
  }
}

// 异步处理
const actions = {
  // 1、更改商品数量
  changeCount: debounce(async function (context, payload) {
    // 提交 mutation 更改数据
    context.commit('changeCount', payload)

    // 发送请求修改商品数量
    const data = await changeCatrItemCount({
      id: payload.id,
      number: payload.count
    })

    const result = judgeRequest(data.status, '修改商品数量失败！') // 判断请求结果

    // 请求失败直接返回
    if (!result) {
      return false
    }
  }, 200),
  // 5、点击全选按钮，更改商品选中状态
  changeAll (state, newStatus) {
    // 遍历所有商品，更改其 checked 状态
    state.cartList.forEach(item => {
      item.checked = newStatus
    })
  }
}

export default {
  state,
  getters,
  mutations,
  actions
}
